<template>
    <div class="container">
        <div class="forms back-fff">
            <el-form ref="form" :model="forms" label-width="160px" class="form">
                <template v-for="(item,index) in forms.componts || []">
                    <div class="lable" v-if="item.type=='label'" :key="index">{{item.title}}</div>
                    <el-form-item v-if="item.type=='text' && item.isHide!='1'" :key="index" :label="item.title" :prop="'componts.' + index + '.dfvalue'" :rules="{ required: true, message: 'Please input', trigger: 'change'}">
                        <el-input v-model="item.dfvalue" placeholder="Please input"></el-input>
                    </el-form-item>
                </template>
            </el-form>
        </div>
        <div class="sava back-fff flex-center">
            <el-button type="primary" @click="Submit">Submit</el-button>
        </div>
    </div>
</template>
<script>
import {GetFormSchemeInfo,SubmitFormSchemeInfo} from "@/api/activity"
export default {
	data() {
		return {
			F_FormId:this.$route.query.F_FormId,
			forms:{},
			formsAll:{}
		};
	},
	mounted(){
		GetFormSchemeInfo({F_FormId:this.F_FormId}).then(res => {
			if(res.data.Data.length > 0){
				let forms = res.data.Data[0]['F_Scheme'];
				typeof forms == 'string' && (forms = JSON.parse(forms))
				this.formsAll = {...forms};
				this.forms = forms.data || {}
				console.log(forms);
			}
			
		})
	},
	methods: {
		Submit() {
			this.$refs.form.validate((valid) => {
				if (!valid) return false;
				this.forms.componts.forEach(item => {
					if(item.id == 'F_CreateUserName'){
						item.dfvalue = this.$store.state.user.F_RealName
					}
					if(item.id == 'F_CreateUserId'){
						item.dfvalue = this.$store.state.user.F_UserId
					}
				})
				this.formsAll.data = {...this.forms};
				SubmitFormSchemeInfo(this.formsAll).then(() => {
					this.$message.success({message: '提交成功'})
					this.$router.back();
				})
			});
		},
	},
};
</script>
<style scoped lang="scss">
.forms{
    padding: 30px;
    border-top: 1px solid #eee;
    margin-top: 15px;
    .form{
        max-width: 600px;
        margin: 0 auto;
        position: relative;
        left: -80px;
        ::v-deep .el-form-item__label{
            color: #666666;
            font-size: 14px;
            font-weight: 400;
        }
        ::v-deep .el-select{
            width: 100%;
        }
    }
    .lable{
        text-align: center;
        margin-bottom: 30px;
        font-size: 20px;
        font-weight: 600;
    }
}
.sava{
    padding: 20px;
    margin-top: 10px;
}
</style>